<template>
  <div class="container">
    <Category title="食物">
      <img
          src="https://ts1.tc.mm.bing.net/th/id/R-C.39ca6e16e0a7bc1ddd87a8413b5b9894?rik=O9W0DKZNjjxPpw&riu=http%3a%2f%2fp0.itc.cn%2fimages01%2f20210116%2fca8f2ef46abf4922aa80c92c9cc96526.jpeg&ehk=JZWT%2fx3ZBxDHviRXQtN240px%2bsOMRd%2fchVmzRjQcoCo%3d&risl=&pid=ImgRaw&r=0"
          alt="">
    </Category>
    <Category title="饮料">
      <ul>
        <li v-for="(item, index) in games" :key="index">{{ item }}</li>
      </ul>
    </Category>
    <Category title="游戏">

    </Category>
  </div>
</template>

<script>
import Category from "./components/Category";

export default {
  name: 'App',
  components: {Category},
  data() {
    return {
      foods: ['火锅', '烧烤', '小龙虾', '牛排'],
      drinks: ['水', '茶', '咖啡', '酒'],
      games: ['LOL', '王者荣耀', '英雄联盟', 'DNF']
    }
  }
}
</script>

<style>
.container {
  display: flex;
  justify-content: space-around;
}
</style>